<template>
  <div id="Base" class="company-detail pt116">
    <div class="company-detail__warp">


      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/proList">项目数据</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>项目详情</BreadcrumbItem>
        </Breadcrumb>
      </div>


			<div class="company-detail__header">
        <Row type="flex" justify="start">
          <Col :span="3">
            <projectTypeIcon :p-type="pType"></projectTypeIcon>
          <!--<p>浏览量：N 次</p>-->
          </Col>
          <Col :span="21">
            <div class="staff-info">
              <h3>{{detail?.projectName}}</h3>

              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>立项赋码:</span>{{detail?.assignCode}}</p>
                </Col>
                <Col :span="12">
                  <p><span>项目类别:</span>{{detail?.projectType}}</p>
                </Col>
              </Row>
              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>项目用途:</span>{{detail?.projectUsage}}</p>

                </Col>
                <Col :span="12">
                  <p><span>项目投资:</span>{{detail?.planAssets}}（万元）</p>

                </Col>
              </Row>
              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>建设单位:</span>{{detail?.constrUnitName}}</p>

                </Col>
                <Col :span="12">
                  <p><span>建设地址:</span>{{detail?.projectAddr}}</p>
                </Col>
              </Row>
            </div>
          </Col>

        </Row>
			</div>


      <Tabs type="card" v-model:activeKey="activeKey">
        <TabPane key="1" tab="基本信息">
          <Base :detail="detail"/>
        </TabPane>
        <TabPane key="2" tab="参建单位及人员">
          <Related />
        </TabPane>
        <TabPane key="3" tab="项目发包">
          <Bid  />
        </TabPane>
        <TabPane key="4" tab="单位工程">
          <Unit />
        </TabPane>
        <TabPane key="5" tab="项目大事记">
          <MajorEvent  />
        </TabPane>
        <TabPane key="6" tab="环节信息">
          <Link  />
        </TabPane>
<!--        <TabPane key="7" tab="工程文书信息">
          <div class="b">
            <Empty></Empty>
          </div>
        </TabPane>-->
        <TabPane key="7" tab="奖惩记录">
          <Reward  />
        </TabPane>
      </Tabs>

		</div>

  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, provide, ref } from 'vue';
import {Row, Col, Breadcrumb, Tabs , Empty} from "ant-design-vue";
import { useRoute } from 'vue-router'
import { Base , Related , Unit , MajorEvent , Bid , Link , Reward } from './src';
import { getProjectBaseApi, ProjectBaseModel, creditLevelEnum } from '/@/api/pro';
import projectTypeIcon from '/@/components/projectTypeIcon/index.vue';
import { parseTime } from '/@/utils';
export default defineComponent({
	components: {
    Base, Related,Unit, MajorEvent, Bid, Link ,Reward, Row, Col,
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item, Empty,
    BreadSeparator: Breadcrumb.Separator,
    Tabs, TabPane: Tabs.TabPane , projectTypeIcon
  },
  name: "Detail",
  setup() {
    const { params } = useRoute();
    const projectId:string = params.id as string;
    const pType = ref<number>(0);
    const detail = ref<ProjectBaseModel>({});
    provide('projectId', projectId);
    const init = async() => {
      let result = await getProjectBaseApi(projectId);
      detail.value = result;
      switch (result.projectType) {
        case '房屋建筑工程':
          pType.value = 1
          break;
        case '市政公用工程':
          pType.value = 2
          break;
        default:
          pType.value = 0
      }
    }
    onMounted(init);
    return {
      detail, creditLevelEnum, parseTime , activeKey: ref("1"),pType
    }
  }
})
</script>

<style lang="less" scoped>

.company-detail {

  .company-detail__warp {
		width: @main-width;
		margin: 0 auto;

		.company-detail__header {
      position: relative;
      padding: 30px;
      margin-bottom: 16px;
      background: #fff;

      .ant-col-3 {
        flex: 0 0 10.5%;
      }

		}
	}

  .staff-info{
    h3{
      min-height: 37px;
      margin-bottom: 15px;
      font-size: 26px;
      font-weight: 600;
      line-height: 37px;
      color: #000;
    }

    p{
      margin-bottom: 1px;
      color: #000;

      &.car-no{
        margin-bottom: 18px;
      }

      > span {
        margin-right: 8px;
        line-height: 20px;
        color: #777;
      }
    }
  }
}

::v-deep(.ant-tabs-card) {
  margin-bottom: 40px;
  background: white;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 30px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;

      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }
}

.b{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;

}
</style>
